<template>
  <div class="header">
    <span class="news" @click="onclickLeft"
      ><img src="../../../public/消息图标.png" alt=""
    /></span>
    <span class="find">樊登讲书</span>
    <span class="big" @click="onclickRight"
      ><img src="../../../public/搜索.png" alt=""
    /></span>
  </div>
  <div class="vip">
    <!-- 加入vip -->
    <img
      :src="
        user.personal.userimg
          ? user.personal.userimg
          : require('../../assets/imgs/message_slices/xx-4@2x.png')
      "
      alt=""
      class="avatar"
    />
    <div class="info">
      <p>{{ user.personal.username ? user.personal.username : "未登录" }}</p>
      <span>每天1元加入VIP享专属特权&gt;</span>
    </div>
    <div class="joinVip" @click="tovip">立即开通</div>
  </div>
  <div class="banner">
    <!-- 推荐--轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in lunbo.list" :key="index">
        <img :src="item.url" alt="" />
      </van-swipe-item>
    </van-swipe>
  </div>
  <div class="reading">
    <h4>最近在学</h4>
    <!-- 最近在学--横向滚动 -->
    <ul class="list">
      <li v-for="(item, index) in reading.list" :key="index">
        <img :src="item.imgUrl" alt="" />
        <h5>{{ item.title }}</h5>
        <span>已学{{ index + 1 }}%</span>
      </li>
    </ul>
  </div>
  <!-- 列表区域 -->
  <van-tabs v-model:active="active" animated>
    <van-tab :title="'全部'">
      <div class="btn">
        <div class="order">
          <span :class="{ active: btnn.focus === 1 }" @click="news"
            >最新上线</span
          >
          <span :class="{ active: btnn.focus === 2 }" @click="hots"
            >最热门</span
          >
        </div>
        <span><i></i>是否已读</span>
      </div>
      <ul class="list">
        <li v-for="(item, index) in alllist.list" :key="index">
          <img :src="item.url" alt="" />
          <div class="right">
            <div class="infor">
              <h6>{{ item.title }}</h6>
              <p>{{ item.msg }}</p>
              <p>{{ item.time }}</p>
            </div>
            <p>播放量{{ item.plays }}万</p>
          </div>
        </li>
      </ul>
    </van-tab>
    <van-tab :title="'心灵'"> 内容 {{}} </van-tab>
    <van-tab :title="'管理'"> 内容 {{}} </van-tab>
    <van-tab :title="'职场'"> 内容 {{}} </van-tab>
    <van-tab :title="'家庭'"> 内容 {{}} </van-tab>
    <van-tab :title="'人文'"> 内容 {{}} </van-tab>
    <van-tab :title="'创业'"> 内容 {{}} </van-tab>
    <van-tab :title="'人文'"> 内容 {{}} </van-tab>
    <van-tab :title="'创业'"> 内容 {{}} </van-tab>
  </van-tabs>
</template>

<script>
import { onBeforeMount, ref, reactive } from "vue";
import { useRouter } from "vue-router";
import {
  getFindApi,
  getMoretuiApi,
  getBooksApi,
  postPersonpai,
} from "../../utils/api";
export default {
  setup() {
    //轮播图
    const lunbo = reactive({
      list: [],
    });
    //最近在读
    const reading = reactive({
      list: [],
    });
    // 列表
    const active = ref(0);
    const alllist = reactive({
      list: [],
    });
    const btnn = reactive({
      focus: 1,
    });
    //头部搜索和消息跳转
    const router = useRouter();
    const onclickLeft = () => {
      router.push("/news");
    };
    const onclickRight = () => {
      router.push("/search");
    };
    const user = reactive({
      personal: {},
    });
    //路由跳转vip
    const tovip = () => {
      router.push("/vip");
    };
    onBeforeMount(async () => {
      //登录判断
      //获取本地登录记录
      let token = localStorage.getItem("token");
      //已登录
      if (token) {
        const person = await postPersonpai({ usertel: token });
        user.personal = person.data.data;
      }
      //轮播请求
      const res = await getFindApi();
      lunbo.list = res.data.result;
      //再读
      const learn = await getMoretuiApi();
      reading.list = learn.data.result;
      //alllistji
      const list = await getBooksApi();
      alllist.list = list.data.result;
      // alllist.list.sort(sorts("proId"));
    });
    //日期字符串比较排序
    const sortString = (porperty) => {
      return (a, b) => {
        return (
          Date.parse(b[porperty].slice(0, 10)) -
          Date.parse(a[porperty].slice(0, 10))
        );
      };
    };
    //数字排序排序算法
    const sorts = (porperty) => {
      return (a, b) => {
        return b[porperty] - a[porperty];
      };
    };
    // const sortString = (porperty) => {
    //   return (a, b) => {
    //     return b[porperty] - a[porperty];
    //   };
    // };
    //最新
    const news = () => {
      btnn.focus = 1;
      //排序
      alllist.list.sort(sortString("time"));
    };
    //热门
    const hots = () => {
      btnn.focus = 2;
      alllist.list.sort(sorts("plays"));
    };
    return {
      onclickLeft,
      onclickRight,
      user,
      lunbo,
      reading,
      active,
      alllist,
      news,
      hots,
      btnn,
      tovip,
    };
  },
};
</script>

<style lang="less" scoped>
.header {
  top: 0;
  z-index: 10;
  width: 100%;
  position: fixed;
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  background: #fff;
  .news {
    vertical-align: middle;
  }
  .find {
    font-size: 16px;
    color: #000;
    font-weight: 600;
    height: 29px;
    line-height: 29px;
  }
  .big {
    vertical-align: middle;
  }
}
//加入vip
.vip {
  margin-top: 60px;
  margin-bottom: 20px;
  display: flex;
  padding: 0 14px;
  .avatar {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
  .info {
    flex: 1;
    p {
      margin-top: 5px;
      font-size: 14px;
      font-weight: 600;
      color: #333333;
    }
    span {
      margin-top: 6px;
      font-size: 12px;
      font-weight: 500;
      color: #333333;
    }
  }
  .joinVip {
    align-self: center;
    text-align: center;
    font-size: 14px;
    line-height: 28px;
    background: #fdd303;
    width: 83px;
    height: 28px;
    border-radius: 14px;
  }
}
.banner {
  margin: 20px 0;
  /deep/.van-swipe__track {
    margin-left: 12px;
    img {
      width: 350px;
      height: 150px;
    }
  }
}
.reading {
  h4 {
    font-weight: bold;
    color: #333333;
    font-size: 18px;
    margin-left: 16px;
  }
  .list {
    margin: 20px 0;
    display: -webkit-flex;
    li {
      margin-left: 16px;
      width: 80px;
      img {
        width: 80px;
        height: 107px;
      }
      h5 {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 28px;
        font-size: 16px;
        font-weight: bold;
        color: #333333;
      }
    }
  }
}
.active {
  background: #fefcf0;
  border: 1px solid #e3eb89;
}
.van-tabs {
  /deep/.van-tabs__wrap {
    position: sticky;
    height: 50px;
    top: 46px;
    z-index: 11;
    margin: 10px 0;
    position: -webkit-sticky;
  }
  /deep/.van-tab--active {
    font-weight: 900;
    font-weight: bold;
    color: #333333;
    font-size: 18px;
  }
  /deep/.van-tabs__line {
    width: 21px;
    height: 4px;
    border-radius: 2px;
    background: #f1d50a;
  }
  .van-tabs__content {
    .btn {
      margin: 0 14px;
      display: flex;
      justify-content: space-between;
      .order {
        font-weight: 600;
        display: flex;
        span {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 10px;
          border-radius: 13px;
          color: #333333;
          font-size: 14px;
          height: 28px;
          width: 80px;
          box-sizing: border-box;
        }
      }
      span {
        line-height: 28px;
        font-size: 13px;
        color: #666666;
      }
    }
    .list {
      // margin-bottom: 60px;
      li {
        margin: 20px 0;
        display: flex;
        img {
          width: 85px;
          height: 114px;
          margin: 0 15px 0 14px;
        }
        .right {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .infor {
            h6 {
              font-size: 16px;
              font-weight: bold;
              color: #333333;
              line-height: 32px;
            }
            p {
              margin: 6px 0;
              font-weight: 600;
              color: #999999;
              font-size: 12px;
            }
          }
          p {
            font-weight: 600;
            color: #ae8c4f;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
